<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>日志管理</el-breadcrumb-item>
            <el-breadcrumb-item>登录日志</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <!-- 搜索 添加 -->
            <el-row :gutter="24">
                <el-col :span="2" style="padding-right: 0">
                    <el-col :span="1">
                        <el-button type="text" style="color: black;font-weight: bolder;font-size: 14px;" size="small">
                            登录地址
                        </el-button>
                    </el-col>
                </el-col>
                <el-col :span="5">
                    <el-input size="small" placeholder="请输入内容" v-model="queryInfo.ipaddr" clearable></el-input>
                </el-col>
                <el-col :span="2" style="padding-right: 0">
                    <el-col :span="1">
                        <el-button type="text" style="color: black;font-weight: bolder;font-size: 14px;" size="small">
                            用户名称
                        </el-button>
                    </el-col>
                </el-col>
                <el-col :span="5">
                    <el-input size="small" placeholder="请输入内容" v-model="queryInfo.username" clearable></el-input>
                </el-col>
                <el-col :span="1">
                    <el-button type="text" style="color: black" size="small">状态</el-button>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="queryInfo.status" placeholder="请选择" size="small">
                        <el-option label="正常" value="1"></el-option>
                        <el-option label="关闭" value="0"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" icon="el-icon-search" @click="getLoginLogList" size="mini">搜索</el-button>
                </el-col>
                <el-col :span="2" style="float: right">
                    <el-button icon="el-icon-refresh" style="float: right;margin-right: 40px;" @click="resetQuery"
                               size="mini">重置
                    </el-button>
                </el-col>
            </el-row>
            <el-row :gutter="10" style="margin-bottom: 8px;margin-top: 12px">
                <el-col :span="1.5">
                    <el-button
                            type="danger"
                            icon="el-icon-delete"
                            size="mini"
                            :disabled="multiple"
                            @click="handleDelete"
                    >删除
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                            type="danger"
                            icon="el-icon-delete"
                            size="mini"
                            @click="handleClean"
                    >清空
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                            type="warning"
                            icon="el-icon-download"
                            size="mini"
                            :disabled="multiple"
                            @click="handleExportSelected"
                    >导出选中
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button
                            type="success"
                            icon="el-icon-download"
                            size="mini"
                            @click="handleExportAll"
                    >导出所有
                    </el-button>
                </el-col>
            </el-row>
            <el-table
                    ref="loginLogTable"
                    :data="list"
                    :row-key="getRowKey"
                    @selection-change="handleSelectionChange"
                    header-row-class-name="table_header"
                    :header-cell-style="table_header"
                    border
                    stripe
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
            >
                <el-table-column type="selection" :reserve-selection="true" width="55" align="center"/>
                <el-table-column label="编号" width="70" align="center" prop="infoId"/>
                <el-table-column label="用户名称" width="80" align="center" prop="username"/>
                <el-table-column label="登录地址" align="center" prop="ipaddr" width="120" :show-overflow-tooltip="true"/>
                <el-table-column label="登录地点" align="center" prop="loginLocation"/>
                <el-table-column label="浏览器" align="center" prop="browser"/>
                <el-table-column label="操作系统" align="center" prop="os"/>
                <el-table-column label="登录状态" width="70" align="center" prop="status" :formatter="statusFormat"/>
                <el-table-column label="操作信息" width="90" align="center" prop="msg"/>
                <el-table-column label="登录日期" align="center" prop="loginTime" width="160">
                    <template slot-scope="scope">
                        <span>{{ scope.row.loginTime | parseTime }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <div class="pager-box">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.pageNum"
                        :page-sizes="[2, 5, 10, 15]"
                        :page-size="queryInfo.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        prev-text="上一页"
                        next-text="下一页"
                        :total="total"
                        background
                        hide-on-single-page
                ></el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {formatJson} from "@/utils"

    export default {
        data() {
            return {
                // 权限列表
                queryInfo: {
                    // 当前页数
                    pageNum: 1,
                    // 每页显示多少数据
                    pageSize: 10,
                    status: undefined,
                    ipaddr: undefined,
                    username: undefined,
                },
                loading: true,
                // 选中数组
                ids: [],
                // 非多个禁用
                multiple: true,
                // 状态数据字典
                statusOptions: [],
                // 总条数
                list: [],
                total: 0,
                // 日期范围
                dateRange: [],
            }
        },
        created() {
            this.getLoginLogList();
        },
        methods: {
            table_header(row, column, rowIndex, columnIndex) {
                return 'background-color: #409EFF; color: white; font-size: 12px;'
            },
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize;
                this.getLoginLogList()
            },
            handleCurrentChange(newNum) {
                this.queryInfo.pageNum = newNum;
                this.getLoginLogList();
            },
            statusFormat(row, column) {
                return row.status === '0' ? '正常' : '关闭'
            },
            getRowKey(row) {
                return row.infoId;
            },
            async getLoginLogList() {
                var v1 = this;
                const {data: res, status: status} = await this.axios.get('loginlog/getLoginLogList', {params: v1.queryInfo});
                if (status !== 200) {
                    return this.$message.error('获取登录日志列表失败！')
                }
                this.list = res.data.list;
                this.total = res.data.total;
                this.loading = false;
            },
            async cleanLoginLog() {
                const {data: res, status: status} = await this.axios.delete('loginlog/clean');
                if (status !== 200) return this.$message.error(res.msg);
                this.$message.success("清空登录日志成功")
                this.list = [];
            },
            handleQuery() {
                this.queryInfo.pageNum = 1;
                this.getLoginLogList();
            },

            resetQuery() {
                this.dateRange = [];
                this.queryInfo.loginLocation = '';
                this.queryInfo.username = "";
                this.queryInfo.status = "";
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.infoId);
                this.multiple = !selection.length;
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                let v1 = this;
                const infoIds = row.infoId || this.ids;
                this.$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    v1.axios.delete("loginlog/deleteLoginLog", {params: {"ids": infoIds}})
                        .then(function (response) {
                            if (response.status !== 200) {
                                return v1.$message.error(res.msg);
                            }
                            v1.getLoginLogList();
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }).then(() => {
                    this.getLoginLogList();
                    this.message.success('删除成功')
                }).catch(function () {
                })
            },
            /** 清空按钮操作 */
            handleClean() {
                let v1 = this;
                this.$confirm('是否确认清空所有登录日志数据项?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    let v2 = v1;
                    v1.axios.delete("loginlog/clean")
                        .then(function (response) {
                            if (response.status !== 200) {
                                return v1.$message.error(res.msg);
                            }
                            v2.getLoginLogList();
                            v2.$message.success('清空成功')
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }).then(() => {
                }).catch(function () {
                })
            },
            /** 导出按钮操作 */
            handleExportSelected() {
                this.$confirm('是否确认导出选中的登录日志数据项?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const ids = this.ids;
                    this.downloadLoading = true;
                    const {data: res, status: status} = await this.axios.get('loginlog/getLoginLogListByIds', {params: {ids}});
                    if (status !== 200) return this.$message.error(res.msg);
                    import('@/vendor/Export2Excel').then(excel => {
                        const tHeader = ['编号', '用户名称', '登陆地址', '登陆地点', '浏览器', '操作系统', '登陆状态', '操作信息', '登陆日期']
                        const filterVal = ['infoId', 'username', 'ipaddr', 'loginLocation', 'browser', 'os', 'status', 'msg', 'loginTime']
                        const data = formatJson(filterVal, res.data);
                        excel.export_json_to_excel({
                            header: tHeader,
                            data,
                            filename: '登录日志',
                            autoWidth: true, // Optional
                            bookType: 'xlsx' // Optional
                        })
                        this.downloadLoading = false
                    })
                })
            },
            handleExportAll() {
                this.$confirm('是否确认导出所有登录日志数据项?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    this.downloadLoading = true;
                    var queryParams = JSON.parse(JSON.stringify(this.queryInfo));
                    queryParams.pageNum = undefined;
                    queryParams.pageSize = undefined;
                    const {data: res, status: status} = await this.axios.get('loginlog/getLoginLogList', {params: queryParams});
                    if (status !== 200) return this.$message.error(res.msg);
                    import('@/vendor/Export2Excel').then(excel => {
                        const tHeader = ['编号', '用户名称', '登陆地址', '登陆地点', '浏览器', '操作系统', '登陆状态', '操作信息', '登陆日期']
                        const filterVal = ['infoId', 'username', 'ipaddr', 'loginLocation', 'browser', 'os', 'status', 'msg', 'loginTime']
                        const data = formatJson(filterVal, res.data.list);
                        excel.export_json_to_excel({
                            header: tHeader,
                            data,
                            filename: '登录日志',
                            autoWidth: true, // Optional
                            bookType: 'xlsx' // Optional
                        })
                        this.downloadLoading = false
                    })
                })
            },
        },
    }
</script>
<style lang="less" scoped>
</style>